﻿@page "/alert"

    <PageTitle Title="警告消息框(BootAlert)">
        使用少量可用的灵活警报消息为典型的用户操作提供上下文反馈消息。
    </PageTitle>

<PresentationPart Title="简单示例">
    <Description>
        @Code.GetCode("设置 `Text` 来填充警告消息框的内容，并可以设置 `Color` 来以根据需要展现不同的主题。若不设置 `Color` 时，警告框的主题颜色为 `Color.Primary` 样式。")
    </Description>
    <RunTemplate>
        <BootAlert Color="Color.Primary">这是 Primary 警告消息框</BootAlert>
        <BootAlert Color="Color.Secondary">这是 Secondary 警告消息框</BootAlert>
        <BootAlert Color="Color.Info">这是 Info 警告消息框</BootAlert>
        <BootAlert Color="Color.Warning">这是 Warning 警告消息框</BootAlert>
        <BootAlert Color="Color.Success">这是 Success 警告消息框</BootAlert>
        <BootAlert Color="Color.Danger">这是 Danger 警告消息框</BootAlert>
        <BootAlert Color="Color.Light">这是 Light 警告消息框</BootAlert>
        <BootAlert Color="Color.Dark">这是 Dark 警告消息框</BootAlert>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootAlert Color=""Color.Primary"">这是 Primary 警告消息框</BootAlert>
<BootAlert Color=""Color.Secondary"">这是 Secondary 警告消息框</BootAlert>
<BootAlert Color=""Color.Info"">这是 Info 警告消息框</BootAlert>
<BootAlert Color=""Color.Warning"">这是 Warning 警告消息框</BootAlert>
<BootAlert Color=""Color.Success"">这是 Success 警告消息框</BootAlert>
<BootAlert Color=""Color.Danger"">这是 Danger 警告消息框</BootAlert>
<BootAlert Color=""Color.Light"">这是 Light 警告消息框</BootAlert>
<BootAlert Color=""Color.Dark"">这是 Dark 警告消息框</BootAlert>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="自定义文本">
    <Description>
        可以在 <code>BootAlert</code> 标记之间定义任意内容。
    </Description>
    <RunTemplate>
        <BootAlert Color="Color.Success">
            <h4>干得漂亮！</h4>
            <hr />
            <p>
                恭喜！你成功地读到了这条重要的提示信息。这个示例文本将运行更长一点，以便您可以看到警报中的间距是如何处理这类内容的。
            </p>
            <hr />
            当你需要的时候，一定要使用边距工具来保持整洁。
        </BootAlert>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootAlert Color=""Color.Success"">
<h4>干得漂亮！</h4>
<hr />
<p>
恭喜！你成功地读到了这条重要的提示信息。这个示例文本将运行更长一点，以便您可以看到警报中的间距是如何处理这类内容的。
</p>
<hr />
当你需要的时候，一定要使用边距工具来保持整洁。
</BootAlert>
```
")
    </CodeTemplate>
</PresentationPart>
<PresentationPart Title="关闭按钮">
    <Description>
        @Code.GetCode("设置 `Dismisable` 为 `true` 时，则会在右侧显示一个“X”，点击后可关闭消息框。关闭后，只能通过代码才能将其再次显示。")
    </Description>
    <RunTemplate>
        <BootAlert Color="Color.Danger" Dismisable="true">
            对不起，您填写的信息有误"
        </BootAlert>
    </RunTemplate>
    <CodeTemplate>

        @Code.GetCode(@"
```html
<BootAlert Color=""Color.Danger"" Dismisable=""true"">
对不起，您填写的信息有误
</BootAlert>
```
")
    </CodeTemplate>
</PresentationPart>

<PresentationPart Title="通过代码控制">
    <Description>
        @Code.GetCode("先在 `code` 代码块中声明一个 `BootAlert` 对象，将该对象通过 `@ref` 绑定到 `BootAlert` 元素中，调用 `Show()` 显示，调用 `Hide()` 隐藏。")
    </Description>
    <RunTemplate>
        <BootButton Color="Color.Success" OnClick="@(()=>alertShowHide.Show())">显示</BootButton>
        <BootButton Color="Color.Danger" OnClick="@(()=>alertShowHide.Hide())">隐藏</BootButton>
        <BootAlert AdditionalCssClass="mt-3" Color="Color.Info" @ref="alertShowHide">我是一个可爱的对话框</BootAlert>
    </RunTemplate>
    <CodeTemplate>
        @Code.GetCode(@"
```html
<BootButton Color=""Color.Success"" OnClick=""@(() => alertShowHide.Show())"">显示</BootButton>
<BootButton Color=""Color.Danger"" OnClick=""@(()=>alertShowHide.Hide())"">隐藏</BootButton>
<BootAlert AdditionalCssClass=""mt-3"" Color=""Color.Info"" @ref=""alertShowHide"">我是一个可爱的对话框</BootAlert>
```
```cs
@code{
BootAlert alertShowHide = new BootAlert();
}
```
        ")

    </CodeTemplate>
</PresentationPart>
@code{
    BootAlert alertShowHide = new BootAlert();
}
<ArgumentDescriptionTable Title="属性">
    <tr>
        <td>Color</td>
        <td>Color</td>
        <td>设置消息框的主题颜色。默认是 <code>Primary</code>。</td>
    </tr>
    <tr>
        <td>Dismisable</td>
        <td>Boolean</td>
        <td>
            设置一个布尔值，表示是否在右侧显示一个关闭的“X”按钮，点击后则会隐藏该警告框。
        </td>
    </tr>
    <tr>
        <td>IsShown</td>
        <td>Boolean</td>
        <td>获取一个布尔值，表示消息框的是否为显示状态。默认是 <code>true</code>。</td>
    </tr>
</ArgumentDescriptionTable>
<ArgumentDescriptionTable Title="事件">

    <tr>
        <td>OnShown</td>
        <td>
            EventCallBack&lt;bool>
        </td>
        <td>设置显示时触发的事件。</td>
    </tr>
    <tr>
        <td>OnHidden</td>
        <td>
            EventCallBack&lt;bool>
        </td>
        <td>设置隐藏时触发的事件。</td>
    </tr>
</ArgumentDescriptionTable>
<ArgumentDescriptionTable Title="方法">

    <tr>
        <td>Show</td>
        <td>Task</td>
        <td>显示警告消息框。</td>
    </tr>
    <tr>
        <td>Hide</td>
        <td>Task</td>
        <td>隐藏警告消息框。</td>
    </tr>
</ArgumentDescriptionTable>